<template>
  <div class="height100">
    <div id="topNav" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in depList"  :key='index' :class="{active:dep_id==item.department_id}" >
          <span>{{item.department_name}}</span>
        </div>
      </div>
    </div>
    <div class="card-box">
      <ul v-if="listStyle">
        <li res="lis" v-for="(item, index) in cardList" :class="{active:dep_id==item.id}" 
         :style="{transform:dep_id==item.id?'translateZ(3rem)':'translateX('+item.translate+'rem)'}" :key='index' @touchstart='touchStart' @touchend='touchEnd'>
          <div class="qcontainer">
            <div v-show="item.moren" class="moren active">
              {{ item.moren}}
            </div>
            <div class="film" :class="{active:item.toogleShow}">
              <div class="face">
                <div class="face-top">
                  <p>{{ item.title}}</p>
                  <img :src= "item.jkewm" alt="">
                  <h3>{{item.name}}</h3>
                  <div class="selfinfo">
                                        <span class="sex-icon" :class="item.sex">

                                        </span>
                    <span class="autonym">
                                            {{item.autonym}}
                                        </span>
                    <span class="self">
                                            {{item.self}}
                                        </span>
                  </div>
                  <div class="tabBtn" @click="_toogleShow">
                    <a href="javascript:;">
                      <img src="images/fukuanma.png" alt="">
                      切换到付款码
                    </a>
                  </div>
                </div>
                <div class="face-bot">
                  <a class="flb" href="javascript:;">设为默认</a>
                  <a class="frb" href="javascript:;">更多信息 ></a>
                </div>
              </div>
              <div class="face back">
                <div class="back-top">
                  <p>居民电子健康卡</p>
                  <img :src="item.fkm" alt="">
                  <div class="tishiinfo">
                    付款码实时更新，一人一码，<br/>
                    仅在支付时使用，请勿截屏!
                  </div>
                  <h3>{{item.name}}</h3>
                  <div class="selfinfo">
                                        <span class="sex-icon" :class="item.sex">

                                        </span>
                    <span class="autonym">
                                           {{item.autonym}}
                                        </span>
                    <span class="self">
                                           {{item.self}}
                                        </span>
                  </div>
                  <div class="tabBtn" @click="_toogleShow">
                    <a href="javascript:;">
                      <img src="images/dianzika.png" alt="">
                      切换到电子卡
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css';
  export default {
    data(){
      return{
        listStyle:false,
        mySwiper:false,
        swiperWidth:'' ,
        maxTranslate:'',
        maxWidth:'',
        dep_id:'0',
        depList:[
          {department_id: 0, department_name: "我"},
          {department_id: 1, department_name: "杰伦"},
          {department_id: 2, department_name: "李荣浩"},
          {department_id: 3, department_name: "张靓颖"},
          {department_id: 4, department_name: "杨千嬅"},
          {department_id: 5, department_name: "胡彦斌"},
          {department_id: 6, department_name: "林俊杰"},
          {department_id: 7, department_name: "张杰"},
          {department_id: 8, department_name: "赵雷"},
          {department_id: 9, department_name: "华晨宇"}
        ] ,
        cardList:[
          {
            id:0,
            moren:"默认",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"*亚鹏",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "本人" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:1,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"杰伦",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "朋友" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:2,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"李荣浩",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "同事" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:3,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"张靓颖",//姓名
            sex:'women',//性别
            autonym:"已实名",//是否实名
            self: "女朋友" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:4,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"杨千嬅",//姓名
            sex:'women',//性别
            autonym:"已实名",//是否实名
            self: "朋友" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:5,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"胡彦斌",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "大哥" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
           {
            id:6,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"林俊杰",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "二哥" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:7,
            // moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"张杰",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "三哥" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:8,
            moren:"",//是否设为默认
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"赵雷",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "四哥" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
          {
            id:9,
            title:"居民电子健康卡",//标题
            jkewm:require("../assets/health-card.png"),// 健康卡二维码
            name:"华晨宇",//姓名
            sex:'man',//性别
            autonym:"已实名",//是否实名
            self: "唱得好" ,// 是否为本人
            fkm:require("../assets/health-card.png"),//付款码
            toogleShow:false,
          },
        ],
        startX:0,
        endX:0,
        disX:0,
        moveX:0
      }

    },
    beforeUpdate() {
      this.Tab(-this.dep_id);
    },
    mounted(){
      const that = this;
      that.mySwiper = new Swiper('#topNav', {
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        slidesPerView: 'auto',
        resistanceRatio:0.7,
      });
      that.swiperWidth =that.mySwiper.width
      that.maxTranslate = that.mySwiper.maxTranslate()
      that.maxWidth = -that.maxTranslate + that.swiperWidth / 2
      that.mySwiper.on('tap', function() {
        // console.log(this.clickedIndex)
        //swiper.clickedIndex(获取到当前点击的索引)
        if(that.dep_id==that.depList[this.clickedIndex].department_id){
            return;
        }
        that.loading_show=true;
        that.dep_name=that.depList[this.clickedIndex].department_name;
        that.dep_id=that.depList[this.clickedIndex].department_id;
        var slide,slideLeft,slideWidth,slideCenter,nowTlanslate;
        slide = this.slides[this.clickedIndex]
        slideLeft = slide.offsetLeft
        slideWidth = slide.clientWidth
        slideCenter = slideLeft + slideWidth / 2
        that.mySwiper.setTranslate(300)
        if (slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0)
                   
        } else if (slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate)
                   
        } else {
            nowTlanslate = slideCenter - that.swiperWidth / 2
            that.mySwiper.setTranslate(-nowTlanslate)                    
        }    
      })
      this.Tab(this.dep_id)
    },
    methods:{
      Tab(n){
          // console.log(n)
          this.cardList.forEach((item, index)=>{
            // console.log(n,index)
            // -1 0 0
            // -2 1 -1
            item.translate =5.6*(n+index)
            // console.log(n+index)
            // console.log(item.translate)
          })
          
          this.listStyle = true
          // console.log(this.cardList)
          // this.$refs.lis.cssText.transform='translateZ(3rem)';
      },
      _toogleShow(event){
        if(event) event.preventDefault();
        // this.cardList.forEach((item, index)=> {
        //   item.toogleShow = !item.toogleShow
        // })
        this.cardList[this.dep_id].toogleShow = !this.cardList[this.dep_id].toogleShow
        
      },
      touchStart:function(ev) {
        // ev = ev || event;
        // ev.preventDefault();
        // console.log(ev.targetTouches);
        // console.log(ev.changedTouches);
        if(ev.touches.length == 1) {    //tounches类数组，等于1时表示此时   屏幕
             this.startX = ev.touches[0].clientX; // 记录开始位置
        }
      },
      touchEnd:function(ev) {
        // ev = ev || event;
        // ev.preventDefault();  
        this.endX = ev.changedTouches[0].clientX;
        this.disX = this.endX-this.startX;
        // console.log(this.disX)
        // console.log(this.endX)
        if(Math.abs(this.disX)>100){
          if(this.disX > 100) {
           // 从左向右滑动
            // console.log("向左滑动")
            this.dep_id--
            if(this.dep_id<0){
              this.dep_id = 0
            }
          }else {
             //   从右向左滑动
            // console.log("向右滑动")
            this.dep_id++
            if(this.dep_id>=this.cardList.length){
              // console.log(this.dep_id)
              this.dep_id = this.cardList.length-1
            }
          }
        }
      },
    }
  }
</script>
<style>
  .height100{
    height: 100%;
  }
  #topNav {
    width: 100%;
    overflow: hidden;
    height: 0.8rem;
    background: #fff;
    font: 16px/32px hiragino sans gb, microsoft yahei, simsun;
    border-bottom:1px solid #f8f8f8;
  }
  #topNav .swiper-slide {
    padding: 0 5px;
    letter-spacing:2px;
    /* width:1.5rem !important; */
    width: auto!important;
    line-height: 0.8rem;
    margin: 0 5px;
    text-align:center;
  }
  #topNav .swiper-slide span{

    transition:all .3s ease;
    display:block;
  }
  #topNav .active{
    border-bottom:3px solid #2b96ff;
    box-sizing: border-box
  }
  #topNav .active span{
    transform:scale(1.1);
    color: #2b96ff;
  }
  .card-box{
    width:100%;
    height: calc(100% - 0.82rem);
    background: #f5f8fa;
    position: relative;
    /* overflow: hidden; */
  }
  .card-box>ul{
    margin:0;
    width: 100%;
    height:100%;
    position: relative;
    overflow: hidden;
    /*margin-top: 50px;*/
    /*一定要有以下样式，才会有3D的效果*/
    /*把div变成3D的场景*/
    transform-style: preserve-3d;
    perspective: 1500px;

  }
  .card-box>ul>li{
    width: 4.6rem;
    height: 8.6rem;
    background: #fff;
    /*这里一定要设置为绝对定位*/
    position: absolute;
    /*calc()是一个计算函数  页面的宽度-容器宽度的一半*/
    left: calc(50% - 2.3rem);
    top: 1rem;
    border-radius: 7px;
    /*看到图片的运动过程*/
    transition:0.8s ease-in-out;
    overflow: hidden;


  }
  .card-box>ul>li.active{
    box-shadow: 0 0 20px #d3d6d8;

  }

  .qcontainer{
    width: 100%;
    height: 100%;
    border-radius: 7px;
    position: relative;
  }
  .qcontainer .moren{
    display: none;
    width: 2rem;
    height: 0.5rem;
    text-align: center;
    line-height: 0.5rem;
    color: #fff;
    background: #00a8ff;
    position: absolute;
    top: 7px;
    left: -0.6rem;
    transform: rotateZ(-45deg);
    z-index: 9;
    font-size: 0.14px;
  }
  .qcontainer .moren.active{
    display: block;
  }
  .film {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 1.5s;
  }
  .film.active {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
  }
  .face {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    width: 100%;
    height: 100%;

  }
  .face-top{
    width: 100%;
    height: 90%;
    float: left;
    border-bottom: 1px solid #efefef;
    /* padding: 0.4rem 0.6rem; */
    /*background: yellow;*/
  }
  .face-top p {
    text-align: center;
    font-size: 0.3rem;
    color: #333;
  }
  .face-top img{
    width: 2.4rem;
    height: 2.4rem;
    text-align: center;
  }
  .face-top h3{
    text-align: center;
    font-size: 0.35rem;
    color: #333;
    margin-top: 0.3rem;
  }
  .selfinfo {
    width: 100%;
    height: 0.46rem;
    line-height: 0.46rem;
    text-align: center;
    margin-top: 0.2rem;
  }
  .selfinfo span{
    display: inline-block;

  }
  .sex-icon{
    width: 0.42rem;
    height: 0.46rem;
    vertical-align:top
  }
  .sex-icon.man{
    background: url("../assets/boy.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .sex-icon.women{
    background: url("../assets/gril.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .selfinfo .autonym{
    vertical-align:top;
    width: 1rem;
    height: 0.46rem;
    border: 1px solid #00a8ff;
    background: #f6fcff;
    border-radius: 3px;
    font-size: 0.14rem;
    color: #00a8ff;
    margin: 0 0.15rem;
  }
  .selfinfo .self{
    vertical-align:top;
    width: 1rem;
    height: 0.46rem;
    background: #00a8ff;
    border-radius: 3px;
    color: #fff;
    font-size: 0.18rem;
  }
  .tabBtn{
    width: 100%;
    height: 0.7rem;
    text-align: center;
    margin-top: 0.5rem;
  }
  .tabBtn a{
    width: 80%;
    height: 0.7rem;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    line-height: 0.7rem;
    background: #00a8ff;
    color: #fff;
    display: inline-block;
    font-size: 0.25rem;
  }
  .tabBtn a img{
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.3rem;
    margin-top: -0.02rem;
  }
  .face-bot{
    width: 100%;
    height: 10%;
    float: right;
    line-height: 0.9rem;
    font-size: 0.2rem;
    padding: 0 0.4rem;
  }
  .flb{
    float: left;
    color:#2b96ff
  }
  .frb{
    float: right;
    color:#333333
  }
  .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    background: #ecffe6;
  }
  .tishiinfo{
    width: 100%;
    font-size: 0.2rem;
    color: #00a8ff;
    text-align: center;
    padding-top: 0.1rem;
  }
  .back-top{
    width: 100%;
    height: 100%;
    float: left;
    padding: 0.4rem 0.6rem;
    /*background: yellow;*/
  }
  .back-top p {
    text-align: center;
    font-size: 0.3rem;
    color: #333;
  }
  .back-top img{
    width: auto;
    height: auto;
    text-align: center;
  }
  .back-top h3{
    text-align: center;
    font-size: 0.35rem;
    color: #333;
    margin-top: 0.3rem;
  }
  .back-top .selfinfo {
    width: 100%;
    height: 0.46rem;
    line-height: 0.46rem;
    text-align: center;
    margin-top: 0.2rem;
  }
  .back-top .selfinfo span{
    display: inline-block;

  }
  .back-top .sex-icon{
    width: 0.42rem;
    height: 0.46rem;
    vertical-align:top
  }
  .back-top .sex-icon.man{
    background: url("../assets/boy.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .back-top .sex-icon.women{
    background: url("../assets/gril.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .back-top .selfinfo .autonym{
    vertical-align:top;
    width: 1rem;
    height: 0.46rem;
    border: 1px solid #00a8ff;
    background: #f6fcff;
    border-radius: 3px;
    font-size: 0.14rem;
    color: #00a8ff;
    margin: 0 0.15rem;
  }
  .back-top .selfinfo .self{
    vertical-align:top;
    width: 1rem;
    height: 0.46rem;
    background: #00a8ff;
    border-radius: 3px;
    color: #fff;
    font-size: 0.18rem;
  }
  .back-top .tabBtn{
    width: 100%;
    height: 0.7rem;
    text-align: center;
    margin-top: 0.5rem;
  }
  .back-top .tabBtn a{
    width: 100%;
    height: 0.7rem;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    line-height: 0.7rem;
    background: #26c899;
    color: #fff;
    display: inline-block;
    font-size: 0.25rem;
  }

</style>
